<template>
    <!--全美地图静态展示-->
    <section class="GR-static-map-box" v-show="GRStaticMapShow">
        <figure class="GR-map-bg">
            <aside class="GR-map-hot-city clearfix" style="left: 440px; top: 250px;">
                <span class="span-city" style="left: 0; top: 0;">雅典市中心</span>
                <div class="span-city-content" style="left: -95px; top: -104px;">
                    <div class="top-box">
                        <div>雅典市中心</div>
                        <p>Central Athens</p>
                    </div>
                    <ul class="bottom-box">
                        <li v-for="(item, index) in Athens_MapHouseItem" :key="index" ><router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}" :title="item.title" :alt="item.title">{{ item.title }}</router-link></li>
                    </ul>
                </div>
            </aside>

            <aside class="GR-map-hot-city clearfix" style="left: 200px; top: 285px;">
                <span class="span-city" style="left: 0; top: 0;">比雷埃夫斯港区</span>
                <div class="span-city-content" style="left: -83px; top: -64px;">
                    <div class="top-box">
                        <div>比雷埃夫斯港区</div>
                        <p>Port of Piraeus</p>
                    </div>
                    <ul class="bottom-box">
                        <li v-for="(item, index) in PortOfPiraeus_MapHouseItem" :key="index" ><router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}" :title="item.title" :alt="item.title">{{ item.title }}</router-link></li>
                    </ul>
                </div>
            </aside>

            <aside class="GR-map-hot-city clearfix" style="left: 730px; top: 45px;">
                <span class="span-city" style="left: 0; top: 0;">北部传统贵族区</span>
                <div class="span-city-content" style="left: -82px; top: -104px;">
                    <div class="top-box">
                        <div>北部传统贵族区</div>
                        <p>Northern aristocracy</p>
                    </div>
                    <ul class="bottom-box">
                        <li v-for="(item, index) in north_MapHouseItem" :key="index" ><router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}" :title="item.title" :alt="item.title">{{ item.title }}</router-link></li>
                    </ul>
                </div>
            </aside>

            <aside class="GR-map-hot-city clearfix" style="left: 570px; top: 470px;">
                <span class="span-city" style="left: 0; top: 0;">南部黄金海岸区</span>
                <div class="span-city-content" style="left: -82px; top: -104px;">
                    <div class="top-box">
                        <div>南部黄金海岸区</div>
                        <p>South gold coast</p>
                    </div>
                    <ul class="bottom-box">
                        <li v-for="(item, index) in south_MapHouseItem" :key="index" ><router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}" :title="item.title" :alt="item.title">{{ item.title }}</router-link></li>
                    </ul>
                </div>
            </aside>

            <aside class="GR-map-hot-city clearfix" style="left: 780px; top: 320px;">
                <span class="span-city" style="left: 0; top: 0;">东部国际航空港区</span>
                <div class="span-city-content" style="left: -78px; top: -64px;">
                    <div class="top-box">
                        <div>东部国际航空港区</div>
                        <p>Eastern international airport</p>
                    </div>
                    <ul class="bottom-box">
                        <li v-for="(item, index) in east_MapHouseItem" :key="index" ><router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}" :title="item.title" :alt="item.title">{{ item.title }}</router-link></li>
                    </ul>
                </div>
            </aside>

        </figure>
    </section>
</template>

<script>
    import {mapState} from 'vuex';

    export default {
        data() {
            return {
                Athens_MapHouseItem: [],//全希腊地图静态展示——雅典市中心
                PortOfPiraeus_MapHouseItem: [],//全希腊地图静态展示——比雷埃夫斯港区
                north_MapHouseItem: [],//全希腊地图静态展示——北部传统贵族区
                south_MapHouseItem: [],//全希腊地图静态展示——南部黄金海岸区
                east_MapHouseItem: [],//全希腊地图静态展示——东部国际航空港区

            }
        },
        computed: {
            ...mapState(['GRStaticMapShow']), //从state 拿数据新房房源详情数据和新房汇率详情数据

        },
        created() {
        },
        mounted() {
            //全美地图静态展示——获取地图推荐房源数据
            this.getMapHouseData('17');//雅典市中心
            this.getMapHouseData('18');//比雷埃夫斯港区
            this.getMapHouseData('19');//北部传统贵族区
            this.getMapHouseData('20');//南部黄金海岸区
            this.getMapHouseData('21');//东部国际航空港区
        },
        methods: {
            //全美地图静态展示——获取地图推荐房源数据
            getMapHouseData(cityId) {
                this.$get(`/house/search/1/3?cid=${cityId}&field=time&direction=desc&countryId=3`).then(res => {
                    if (res.status === 0) {
                        switch (cityId){
                            case '17':
                                this.Athens_MapHouseItem = res.list;//雅典市中心
                                break;
                            case '18':
                                this.PortOfPiraeus_MapHouseItem = res.list;//比雷埃夫斯港区
                                break;
                            case '19':
                                this.north_MapHouseItem = res.list;//北部传统贵族区
                                break;
                            case '20':
                                this.south_MapHouseItem = res.list;//南部黄金海岸区
                                break;
                            case '21':
                                this.east_MapHouseItem = res.list;//东部国际航空港区
                                break;
                        }
                    } else {
                        console.log(res.msg);
                    }
                })
            },

        },
        components: {}
    }
</script>

<style scoped lang="less" type="text/less">
    body {
        /*全希腊地图静态展示*/
        .GR-static-map-box{
            text-align: center;
            >.GR-map-bg {
                display: inline-block;
                width: 1150px;
                height: 654px;
                background: url(/static/img/GR-map.jpg) no-repeat center center;
                background-size: 1150px 654px;
                margin: 30px 0 0 0;
                position: relative;
                >.GR-map-hot-city{
                    position: relative;
                    >.span-city{
                        position: absolute;
                        display: inline-block;
                        padding: 3px 10px;
                        text-align: center;
                        z-index: 6;
                        font-size: 14px;
                        color: #fff;
                        background: #1273e1;
                        cursor: pointer;
                        border-radius: 2px;
                    }
                    >.span-city:before{
                        position: absolute;
                        content: "";
                        top: 100%;
                        left: 45%;
                        width: 0;
                        height: 0;
                        border-top: 5px solid #1273e1;
                        border-right: 5px solid transparent;
                        border-bottom: 5px solid transparent;
                        border-left: 5px solid transparent;
                    }
                    >.span-city:hover + .span-city-content{
                        z-index: 9;
                        opacity: 1;
                        filter: alpha(opacity=100);
                        visibility: visible;
                    }
                    >.span-city:hover{
                        z-index: 8;
                    }
                    >.span-city-content{
                        position: absolute;
                        display: inline-block;
                        z-index: 9;
                        border-radius: 2px;
                        box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
                        -webkit-transition: all ease-in 0.3s;
                        -o-transition: all ease-in 0.3s;
                        -moz-transition: all ease-in 0.3s;
                        -ms-transition: all ease-in 0.3s;
                        transition: all ease-in 0.3s;
                        filter: alpha(opacity=0);
                        opacity: 0;
                        visibility: hidden;
                        >.top-box{
                            text-align: center;
                            padding: 10px 30px 5px 30px;
                            color: #abc4e2;
                            font-size: 12px;
                            background: #1273e1;
                            >div{
                                color: #fff;
                                font-size: 18px;
                            }
                        }
                        >.bottom-box{
                            width: 300px;
                            padding: 5px 30px;
                            text-align: center;
                            font-size: 14px;
                            line-height: 20px;
                            background: #fff;
                            >li{
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: block;
                                text-align: center;
                                white-space: nowrap;
                                word-wrap: normal;
                                >a{
                                    color: #333;
                                }
                                >a:hover{
                                    color: #1890ff;
                                }
                            }
                        }
                    }
                    >.span-city-content:before{
                        z-index: 9;
                        position: absolute;
                        content: "";
                        top: 100%;
                        left: 45%;
                        width: 0;
                        height: 0;
                        border-top: 5px solid #fff;
                        border-right: 5px solid transparent;
                        border-bottom: 5px solid transparent;
                        border-left: 5px solid transparent;
                    }
                    >.span-city-content:hover{
                        z-index: 9;
                        opacity: 1;
                        filter: alpha(opacity=100);
                        visibility: visible;
                    }
                }
            }
        }
    }
</style>